<template>
  <div class="container" @click="handleGallaryClick">
    <div class="wrapper">
	    <swiper :options="swiperOptions">
		    <swiper-slide v-for="(item, index) of imgs" :key="index">
			    <img class="gallary-img" :src="item" />
		    </swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
    </div>
  </div>
</template>

<script>
export default{
  name:'CommonGallary',
  props: {
	  imgs: {
		  type: Array,
		  default () {
			  return []
		  }
	  }
  },
  data (){
	  return {
		  swiperOptions: {
			  pagination:'.swiper-pagination',
			  paginationType: 'fraction',
			  observeParents: true,
			  observer: true
		  }
	  }
  },
  methods: {
	  handleGallaryClick () {
		  this.$emit('close')
	  }
  }
}
</script>


<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.container >>> .swiper-container{
	overflow:inherit;
}
.container{
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:999;
	background:#000;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.wrapper{
	height:0;
	width:100%;
	padding-bottom:100%;
}
.gallary-img{
	width:100%
}
.swiper-pagination{
	color:#fff;
	bottom:-50px;
}
</style>
